<template>
    <div>
        <el-drawer
          title="我是标题"
          :visible.sync="drawer"
          :with-header="false">
          <h1 style="font-size:20px">你想查询的关系名称</h1>
          <el-row style="margin-top:30px">
             <el-col :span="4" :offset="1">实体类别</el-col>
             <el-col :span="17" :offset="1">
               <template>
                  <el-radio-group v-model="searchwhat.type">
                    <el-radio label="character">人物</el-radio>
                    <el-radio label="house">家族</el-radio>
                    <el-radio label="castle">城堡</el-radio>
                  </el-radio-group>
                </template>
             </el-col>
          </el-row>
          <el-row style="margin-top:20px">
             <el-col :span="4" :offset="1" style="padding-top:10px">关系名称</el-col>
             <el-col :span="17" :offset="1"><el-input prefix-icon="el-icon-attract" v-model=searchwhat.rel placeholder="请输入内容"></el-input></el-col>
          </el-row>
          <el-row style="margin-top:20px">
             <el-col :span="4" :offset="1" style="padding-top:10px">对应名称</el-col>
             <el-col :span="17" :offset="1"><el-input prefix-icon="el-icon-bank-card" v-model=searchwhat.name placeholder="请输入内容"></el-input></el-col>
          </el-row>
          <el-row style="margin-top:20px">
             <el-col :span="22" :offset="1"><el-button type="primary" @click=getgridData icon="el-icon-search" style="float:right">点击查询</el-button></el-col>
          </el-row>
          <el-row style="margin-top:20px">
             <el-col :span="22" :offset="1">
                <el-table :data="gridData" height="600">
                  <el-table-column property="entityname" label="实体名称" width="200"></el-table-column>
                  <el-table-column property="rel" label="关系" width="200"></el-table-column>
                  <el-table-column property="name" label="名称"></el-table-column>
                </el-table>
             </el-col>
          </el-row>
        </el-drawer>
        <!-- 上面是抽屉 -->
        <el-table
         :data="tabledata"
         style="width: 100%"
         height="445">
        <el-table-column
           prop="num"
           label="序号"
           width="300">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="type"
          label="所属关系"
          width="300">
        </el-table-column>
        <el-table-column
          prop="type2"
          label="所属实体"
          width="200">
        </el-table-column>
         <el-table-column
      align="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">查看</el-button>
      </template>
    </el-table-column>
      </el-table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'RelationCoreList',
  data () {
    return {
      target: 'http://127.0.0.1:8001/statistics',
      nameList: [],
      tabledata: [],
      drawer: false,
      target2: 'http://127.0.0.1:8001/statistics/getRel',
      searchwhat: { type: '', name: '', rel: '' },
      gridData: []
    }
  },
  props: {
    relname: String,
    limit: String,
    type: String
  },
  mounted () {
    this.getDatas()
  },
  methods: {
    getgridData () {
      var that = this
      that.gridData = []
      axios.get(that.target2 + '?name=' + that.searchwhat.name + '&type=' + that.searchwhat.type + '&rel=' + that.searchwhat.rel).then(function (ret) {
        var datalist = ret.data.results.bindings
        for (var i = 0; i < datalist.length; i++) {
          var item = { entityname: '', rel: '', name: '' }
          item.entityname = that.parseUrl(datalist[i].x.value)
          item.rel = that.searchwhat.rel
          item.name = that.searchwhat.name
          that.gridData.push(item)
        }
      })
    },
    parseUrl (url) {
      var arr = url.split('/')
      var len = arr.length
      return arr[len - 1]
    },
    handleEdit (row) {
      var that = this
      that.searchwhat.type = row.type2
      that.searchwhat.name = row.name
      that.searchwhat.rel = row.type
      that.getgridData()
      that.drawer = true
    },
    getDatas () {
      var that = this
      //   console.log('yes i sent')
      //   console.log('send the msg')
      that.tabledata = []
      axios.get(that.target + '/' + that.type + 'RelOf?name=' + that.relname).then(function (ret) {
        // console.log(ret.data.results.bindings.length)
        that.nameList = ret.data.results.bindings
        for (var i = 0; i < that.nameList.length; i++) {
          that.tabledata.push(that.getItem(i, that.nameList[i].z.value, that.relname, that.type))
        }
      })
    },
    getItem (nm, nam, tp, tp2) {
      var that = this
      nam = that.parseUrl(nam)
      var itm = { num: nm, name: nam, type: tp, type2: tp2 }
      return itm
    }
  }
}
</script>
